import React from "react";
import './Datecenter.less'
import { Menu, MenuProps } from "antd";
import { SettingOutlined } from '@ant-design/icons';
import { Outlet, useNavigate } from "react-router-dom";

type MenuItem = Required<MenuProps>['items'][number];

const items: MenuItem[] = [
    {
        key: 'sub1',
        label: '数据中心',
        icon: <SettingOutlined />,
        children: [
            {
                key: 'sub-1',
                label: '灌区概况',
            },
            {
                key: 'sub-2',
                label: '人员岗位',
            },
            {
                key: 'sub-3',
                label: '系统设置',
            }
        ]
    }
]

const Datecenter: React.FC = () => {
    const navigate = useNavigate()
    const onClick:MenuProps['onClick'] = (e) => {
        console.log('click',e)
        navigate(`/service/DataCenter/${e.key}`)
    }
    return (
        <div className="datecenter">
            <div className="datecenter-left">
                <Menu
                    onClick={onClick}
                    style={{ width: '100%' }}
                    defaultSelectedKeys={['sub1']}
                    defaultOpenKeys={['sub1']}
                    mode="inline"
                    items={items}
                />
            </div>
            <div className="datecenter-right">
                <Outlet/>
            </div>
        </div>
    );
};

export default Datecenter;